<template>
  <div class="intent-result">
    <div class="intent-header">
      <el-text type="primary" size="small">
        <el-icon><DataAnalysis /></el-icon>
        AI意图解析详情
      </el-text>
      <el-tag :type="getConfidenceType(result.confidence)" size="small">
        置信度: {{ (result.confidence * 100).toFixed(1) }}%
      </el-tag>
    </div>

    <div class="intent-content">
      <el-descriptions :column="2" size="small" border>
        <el-descriptions-item label="操作类型">
          <el-tag :type="getOperationType(result.operation)" size="small">
            {{ formatOperation(result.operation) }}
          </el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item label="目标表">
          <el-text>{{ result.tableName || '-' }}</el-text>
        </el-descriptions-item>
        
        <el-descriptions-item label="原始问题" :span="2">
          <el-text type="info">{{ result.originalQuestion }}</el-text>
        </el-descriptions-item>
        
        <el-descriptions-item 
          v-if="result.fields && result.fields.length > 0" 
          label="查询字段" 
          :span="2"
        >
          <div class="field-tags">
            <el-tag v-for="field in result.fields" :key="field" size="small" type="info">
              {{ field }}
            </el-tag>
          </div>
        </el-descriptions-item>
        
        <el-descriptions-item 
          v-if="result.conditions && result.conditions.length > 0" 
          label="查询条件" 
          :span="2"
        >
          <div class="conditions">
            <div 
              v-for="(condition, index) in result.conditions" 
              :key="index"
              class="condition-item"
            >
              <el-tag size="small">{{ condition.field }}</el-tag>
              <el-text size="small" type="info">{{ formatOperator(condition.operator) }}</el-text>
              <el-tag size="small" type="warning">{{ condition.value }}</el-tag>
              <el-text 
                v-if="index < result.conditions.length - 1 && condition.logical" 
                size="small" 
                type="primary"
              >
                {{ condition.logical }}
              </el-text>
            </div>
          </div>
        </el-descriptions-item>
        
        <el-descriptions-item 
          v-if="result.updateData && Object.keys(result.updateData).length > 0" 
          label="更新数据" 
          :span="2"
        >
          <div class="data-display">
            <el-tag 
              v-for="(value, key) in result.updateData" 
              :key="key" 
              size="small"
              type="success"
            >
              {{ key }}: {{ value }}
            </el-tag>
          </div>
        </el-descriptions-item>
        
        <el-descriptions-item 
          v-if="result.insertData && Object.keys(result.insertData).length > 0" 
          label="插入数据" 
          :span="2"
        >
          <div class="data-display">
            <el-tag 
              v-for="(value, key) in result.insertData" 
              :key="key" 
              size="small"
              type="success"
            >
              {{ key }}: {{ value }}
            </el-tag>
          </div>
        </el-descriptions-item>
        
        <el-descriptions-item 
          v-if="result.orderBy && result.orderBy.length > 0" 
          label="排序规则"
        >
          <div class="order-display">
            <el-tag 
              v-for="order in result.orderBy" 
              :key="order.field" 
              size="small"
              :type="order.direction === 'ASC' ? 'info' : 'warning'"
            >
              {{ order.field }} {{ order.direction === 'ASC' ? '升序' : '降序' }}
            </el-tag>
          </div>
        </el-descriptions-item>
        
        <el-descriptions-item v-if="result.limit" label="限制数量">
          <el-text>{{ result.limit }}</el-text>
        </el-descriptions-item>
        
        <el-descriptions-item v-if="result.offset" label="偏移量">
          <el-text>{{ result.offset }}</el-text>
        </el-descriptions-item>
        
        <el-descriptions-item 
          v-if="result.groupBy && result.groupBy.length > 0" 
          label="分组字段"
          :span="2"
        >
          <div class="field-tags">
            <el-tag v-for="field in result.groupBy" :key="field" size="small" type="info">
              {{ field }}
            </el-tag>
          </div>
        </el-descriptions-item>
        
        <el-descriptions-item 
          v-if="result.aggregations && result.aggregations.length > 0" 
          label="聚合函数" 
          :span="2"
        >
          <div class="aggregation-display">
            <el-tag 
              v-for="agg in result.aggregations" 
              :key="agg.field + agg.type" 
              size="small"
              type="success"
            >
              {{ agg.type }}({{ agg.field }})
              <span v-if="agg.alias"> as {{ agg.alias }}</span>
            </el-tag>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
import { DataAnalysis } from '@element-plus/icons-vue'
import type { IntentResult } from '@/types'

interface Props {
  result: IntentResult
}

const props = defineProps<Props>()

// 获取置信度类型
function getConfidenceType(confidence: number): string {
  if (confidence >= 0.8) return 'success'
  if (confidence >= 0.6) return 'warning'
  return 'danger'
}

// 获取操作类型
function getOperationType(operation: string): string {
  switch (operation) {
    case 'SELECT': return 'primary'
    case 'INSERT': return 'success'
    case 'UPDATE': return 'warning'
    case 'DELETE': return 'danger'
    case 'COUNT': return 'info'
    default: return 'info'
  }
}

// 格式化操作
function formatOperation(operation: string): string {
  const operationMap: Record<string, string> = {
    'SELECT': '查询',
    'INSERT': '插入',
    'UPDATE': '更新',
    'DELETE': '删除',
    'COUNT': '统计',
    'UNKNOWN': '未知'
  }
  return operationMap[operation] || operation
}

// 格式化操作符
function formatOperator(operator: string): string {
  const operatorMap: Record<string, string> = {
    'EQUALS': '等于',
    'NOT_EQUALS': '不等于',
    'GREATER_THAN': '大于',
    'LESS_THAN': '小于',
    'GREATER_EQUAL': '大于等于',
    'LESS_EQUAL': '小于等于',
    'LIKE': '包含',
    'NOT_LIKE': '不包含',
    'IN': '在...中',
    'NOT_IN': '不在...中',
    'IS_NULL': '为空',
    'IS_NOT_NULL': '不为空',
    'BETWEEN': '介于...之间'
  }
  return operatorMap[operator] || operator
}
</script>

<style scoped>
.intent-result {
  border: 1px solid #d9ecff;
  border-radius: 8px;
  background: #ecf5ff;
  overflow: hidden;
}

.intent-header {
  background: #e1f3ff;
  padding: 12px 16px;
  border-bottom: 1px solid #d9ecff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.intent-content {
  padding: 16px;
}

.field-tags,
.data-display,
.order-display,
.aggregation-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.conditions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.condition-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .intent-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .intent-content {
    padding: 12px;
  }
  
  .condition-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>